<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="jquery/jquery-1.11.3.js"></script>
        <script type="text/javascript">
            $(function(){
//                //链式编程
//                $("tr:eq(2)").siblings("tr").css("background","#00f")
//                        .css("color","#fff")
//                //使用end可以返回上一个包装集
//                        .end().css("background","#f00")
//                        .css("color","#0ff");
                  
//                  //复制了一个tbody 添加到tus中
//                  $("#users tbody").clone().appendTo("#tus")
//                        //除了上面的。还有偶数行  
////                          .add("tr:even")
//                        // filter在当前包装集中过滤元素 find是包装集中找元素
//                          .find("tr:even").css("color","#f00")
//                  //clone包装集
//                          .end()
//                  //原来的包装集,和孔老师的2个end()不一样，待研究
//                          .end().end().find("tr:odd").css("color","#00f");
                    
//                    //andSelf把所有的包装集合并在一起,
//                    $("#users tbody").clone().appendTo("#tus")
//                            //也和孔老师的不一样 需要end();
//                            .end().andSelf()
//                            .find("td:contains('2')").css("color","#f00");
                     
                     
                     //查询出了两个包装集,一个tus的table，一个users的table，过滤得到users这个table
                     //无法使用filter(tr)
                    $("table").filter("table#users").css("color","#f00");
                    //搞清楚是元素的过滤还是包装集的过滤
                    $("#users").find("tr:eq(2)").css("color","#00f");
            });
        </script>
    </head>
    <body>
        <table width="700" border="1" align="center" id="tus"></table>
        <table width="700" border="1" align="center" id="users">
            <thead>
                <tr>
                    <td>用户标识</td>
                    <td>用户姓名</td>
                    <td>用户年龄</td>
                    <td>用户密码</td>
                </tr>
            </thead>
            <tbody>
                <tr id="abc">
                    <td>1</td>
                    <td>张三</td>
                    <td>23</td>
                    <td>abc123</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>33</td>
                    <td>abc123</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王五</td>
                    <td>13</td>
                    <td>abc123</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>赵六</td>
                    <td>45</td>
                    <td>abc123</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>朱琪</td>
                    <td>21</td>
                    <td>abc123</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
